import { useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import a from '@/assets/images/2.png'
import './index.scss'
import { Button,message } from 'antd';

const Text1 = ()=>{
    const canvas = useRef(null);
    const navgate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    let ctx = null;

    useEffect(()=>{
        ctx = canvas.current.getContext('2d');
        
        let x = 0;
        //线性渐变
        // const getLinearGradient = ()=>{
        //     // console.log(1);
        //     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
        //     x += 0.01;
        //     if(x>1){
        //         x = 0;
        //     }
        //     //x0,y0,x1,y1
        //     const linearGradient = ctx.createLinearGradient(230,600,300,600);
        //     linearGradient.addColorStop(0,'red');
        //     linearGradient.addColorStop(x,'yellow');
        //     linearGradient.addColorStop(1,'blue');
        //     ctx.fillStyle = linearGradient;
        //     ctx.fillRect(200,200,100,100)
        //     requestAnimationFrame(getLinearGradient)
        // }
        // requestAnimationFrame(getLinearGradient)
        //径向渐变
        // const getRadialGradient = ()=>{
        //     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
        //     x+= 0.01;
        //     if(x>1){
        //         x = 0;
        //     }
        //     //x0,y0,r0,x1,y1,r1
        //     const radialGradient = ctx.createRadialGradient(250,250,10,250,250,50);
        //     radialGradient.addColorStop(0,'red');
        //     radialGradient.addColorStop(x,'yellow');
        //     radialGradient.addColorStop(1,'blue');
        //     ctx.fillStyle = radialGradient;
        //     ctx.fillRect(200,200,100,100)
        //     requestAnimationFrame(getRadialGradient)
        // }
        // requestAnimationFrame(getRadialGradient)
        //圆锥渐变
        //角度,x0,y0
        // const coneGradinet = ctx.createConicGradient(0,300,300);
        // coneGradinet.addColorStop(0,'red');
        // coneGradinet.addColorStop(1,'blue');
        // ctx.fillStyle = coneGradinet;
        // ctx.arc(300,300,100,0,Math.PI*2);
        // ctx.fill()
        //图案
        // const img = new Image();
        // img.src = a;
        // img.onload = ()=>{
        //     const pattern = ctx.createPattern(img,'no-repeat');
        //     ctx.fillStyle = pattern;
        //     ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height)
        //     console.log(img);
        // }
        // img.onerror = (err)=>{
        //     console.log(err);
            
        // }
        let i = 0;
        const redrn = ()=>{
            ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
            i+=2;
            if(i>40){
                i = 0;
            }
            ctx.moveTo(300,300);
            ctx.lineTo(400,200);
            ctx.lineTo(500,300);
            //线条粗细
            ctx.lineWidth = 1;
            //线条末端样式,butt,round,square
            ctx.lineCap = 'round';
            //线条连接样式,bevel,round,miter
            ctx.lineJoin = 'round';
            //设置虚线，第一个参数是线条长度，第二个参数是间隔长度
            ctx.setLineDash([10,10])
            //设置虚线偏移量
            ctx.lineDashOffset = i;
            //设置阴影,阴影颜色
            ctx.shadowColor = 'red';
            //阴影模糊程度
            ctx.shadowBlur = 3;
            //阴影偏移量
            ctx.shadowOffsetX = 10;
            ctx.shadowOffsetY = 10;
            ctx.stroke()
            requestAnimationFrame(redrn)
        }
        // redrn()
        //绘制图片
        // const img = new Image();
        // img.src = '../../../public/images/1.jpg';
        // img.onload = ()=>{
        //     //img,起始x,起始y,绘制宽度,绘制高度
        //     // ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height)
        //     //img,图片起始x,图片起始y,绘制宽度,绘制高度,绘制起始x,绘制起始y,绘制宽度,绘制高度
        //     ctx.drawImage(img,900,300,400,400,0,0,ctx.canvas.width,ctx.canvas.height)
        // }
        ctx.moveTo(100,100);
        ctx.font='50px Microsoft YaHei';
        //文字对齐方式,start,end,left,right,center
        ctx.textAlign = 'left';
        //文字基线,alphabetic,top,hanging,middle,ideographic,bottom
        ctx.textBaseline = 'middle';
        //文字最大宽度
        ctx.fillText('hello',100,100);
        ctx.arc(100,100,5,0,Math.PI*2);
        ctx.fill()
        //预测文本最大宽度
        // console.log(ctx.measureText('hello'));
        return ()=>{
            console.log(1);
        }
    },[])
    // const canvasClick = (e)=>{
    //     // setNum(num+1)
    //     console.log(e);
    //     // console.log(ctx.arc);
    //     ctx.moveTo(e.clientX,e.clientY);
    //     ctx.arc(e.clientX,e.clientY,5,0,Math.PI*2);
    //     ctx.fill()
    // }
    let isDown = false;
    const move = (e)=>{
        const x = e.pageX -canvas.current.offsetLeft;
        const y = e.pageY -canvas.current.offsetTop;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        if(isDown){
            ctx.lineTo(x,y);
            ctx.stroke()
        }
    }
    let i = 0;
    const clearCanvas = ()=>{
        i+=4;
        if(i>canvas.current.height){
            messageApi.success('清除完成');
            i = 0;
            return;
        }
        ctx.clearRect(0,0,ctx.canvas.width,i)
        requestAnimationFrame(clearCanvas)
    }
    const down = (e)=>{
        ctx.beginPath()
        const x = e.pageX -canvas.current.offsetLeft;
        const y = e.pageY -canvas.current.offsetTop;
        isDown = true;
        ctx.moveTo(x,y);
    }
    const up = (e)=>{
        isDown = false;
        ctx.closePath()
    }
    const saveClick = ()=>{
        const img = canvas.current.toDataURL('image/png');
        const a = document.createElement('a');
        a.href = img;
        a.download = 'canvas';
        a.click()
        messageApi.success('保存图片成功')
    }
    return (<>
    {contextHolder}
        <div className="canvas-box">
            <canvas width={600} height={600} ref={canvas} onMouseMove={move} onMouseDown={down} onMouseUp={up}></canvas>
        </div>
        <Button onClick={clearCanvas} type="primary">清除画布</Button>
        <Button onClick={saveClick} type="primary">保存</Button>
        <Button onClick={()=>navgate('/text2')} type="primary">跳转</Button>
    </>)
}
export default Text1;